<template>
  <!-- <el-button type="primary" @click="handleSearch">查询</el-button> -->
  <!--查询表单 -->
  <!-- <el-form :inline="true" class="demo-form-inline">
    <el-form-item>
      <el-input v-model="teacherQuery.name" placeholder="员工姓名" />
    </el-form-item>
    <el-form-item>
      <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
        <el-option :value="1" label="高级讲师" /

        <el-option :value="2" label="首席讲师" />
      </el-select>
    </el-form-item> -->
    <!-- <el-form-item label="添加时间">
      <el-date-picker v-model="teacherQuery.gegin" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss"
        default-time="00:00:00" />
    </el-form-item>
    <el-form-item>
      <el-date-picker v-model="teacherQuery.end" type="datetime" placeholder="选择截止时间" value-format="yyyy-MM-dd HH:mm:ss"
        default-time="00:00:00" />
    </el-form-item>
    <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
    <el-button type="default" icon="el-icon-delete" @click="resetDate()">清空</el-button>
  </el-form> -->

  <!-- 表格数据 -->
  <el-table class="my-table" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
    <el-table-column type="index" label="序号" :index="1" width="100px"></el-table-column>
    <el-table-column prop="employeeId" label="员工编号" align="center">
    </el-table-column>
    <el-table-column prop="employeeName" label="员工姓名" align="center">
    </el-table-column>
    <el-table-column prop="checkIn" label="上班打卡" align="center" :formatter="formatter">
    </el-table-column>
    <el-table-column prop="checkOut" label="下班打卡" align="center" :formatter="formatter">
    </el-table-column>
    <el-table-column prop="status" label="出勤状态" align="center">
    </el-table-column>
    <!-- <el-table-column label="出勤状态" align="center">
      <template #default="{ row }">
        <span>{{ getAttendanceStatus(row) }}</span>
      </template>
    </el-table-column> -->
  </el-table>

  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 15, 20]"
    v-model:current-page="currentPage" v-model:page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
    :total="parseInt(totalCount)">
  </el-pagination>
</template>

<script>
import dayjs from 'dayjs';
import axios from 'axios';
import { reactive, ref } from 'vue';
const API_URL = 'http://localhost:8080/attendances'; // 替换为实际的 API 地址
// const formAdd = ref();
export default {
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      totalCount: 0,
      tableData: [],
      dialogVisible: false,
      dialogVisibleEdit: false,

    };
  },
  mounted() {
    this.getAll();
  },
  methods: {
    async handleSearch() {
      this.currentPage = 1;
      this.pageSize = 10;
      this.getAll();
    },
    getAll() {
      //发送ajax请求
      axios
        .get(
          'http://localhost:8080/attendances/page?currentPage=' +
          this.currentPage +
          '&pageSize=' +
          this.pageSize
        )
        .then((res) => {
          console.log(res.data);
          //设置表格数据
          this.tableData = res.data.rows;
          this.totalCount = res.data.totalCount;

          // 根据 checkIn 时间点判断出勤状态
          // this.tableData.forEach((row) => {
          //   // console.log(row.checkIn);
          //   // console.log(row.checkOut);
          //   row.attendanceStatus = this.calculateAttendanceStatus(row.checkIn, row.checkOut);
          // });

        });
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'table-row-even';
      }
      return '';
    },
    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getAll();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      //点击后重新设置当前页码
      this.currentPage = val;
      this.getAll();
    },
    formatter(row, column) {
      return dayjs(row[column.property]).format('YYYY-MM-DD HH:mm:ss');
    },

    // 根据打卡时间来判断出勤状态
    // calculateAttendanceStatus(checkIn, checkOut) {
    //   const checkInTime = new Date(checkIn);
    //   const checkOutTime = new Date(checkOut);
    //   const morningStart = new Date(checkInTime.getFullYear(), checkInTime.getMonth(), checkInTime.getDate(), 8, 30, 0, 0);
    //   const afternoonEnd = new Date(checkOutTime.getFullYear(), checkOutTime.getMonth(), checkOutTime.getDate(), 17, 30, 0, 0);
    //   const morningEnd = new Date(checkInTime.getFullYear(), checkInTime.getMonth(), checkInTime.getDate(), 8, 40, 0);
    //   const afternoonStart = new Date(checkOutTime.getFullYear(), checkOutTime.getMonth(), checkOutTime.getDate(), 17, 0, 0, 0);

    //   if (checkInTime <= morningStart && checkOutTime >= afternoonEnd) {
    //     return "正常";
    //   } else if (
    //     (checkInTime >= morningStart && checkInTime <= morningEnd) &&
    //     checkOutTime >= afternoonEnd
    //   ) {
    //     return "迟到";
    //   } else if (
    //     checkInTime <= morningStart &&
    //     (checkOutTime >= afternoonStart && checkOutTime <= afternoonEnd)
    //   ) {
    //     return "早退";
    //   } else {
    //     return "缺勤";
    //   }
    // },
    // getAttendanceStatus(row) {
    //   // 返回出勤状态文本
    //   return row.attendanceStatus || "未知";
    // },
  },
};
</script>

<style scoped>
.table-row-even {
  background-color: #4d72a9;
}
</style>
